import React from 'react'
import { connect } from 'dva'
import { Form, Button, Modal, Popconfirm, Table, Row, Col, Input, Select, Cascader, Icon, Checkbox, DatePicker } from 'antd'
import { Link, hashHistory } from 'dva/router'
import config from 'config/config'
import { mapStateToProps } from 'utils/view_utils'
import styles from './advertisingWindowListStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import classnames from 'classnames/bind';
let cx = classnames.bind(styles);
import { CustomCard } from '../../../widget/Grid/CustomCard'
import FlagBtn from 'widget/FlagBtn/FlagView'
import Keypress from 'widget/Keypress'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import Uploader from 'widget/Upload'


const FormItem = Form.Item
const { RangePicker } = DatePicker
const confirm = Modal.confirm;


const advertisingWindowListView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  // modelObj.xxx获取model中状态机的值
  let { areaList, businessIdList, contentId } = modelObj
  // 资讯新增/编辑/详情页跳转
  function addOrEditSkip(type, id) {
    hashHistory.push({
      pathname: '/home/advertisementAdmin/advertisingWindowDetail',
      query: { actionType: type, advertisementId: id }
    });
  }
  //删除
  function deleteContent(id) {
    confirm({
      title: '删除确认',
      content: '您真的要删除此条广告通知吗?',
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        console.group(id)
        dispatch({
          type: `${namespace}/updateStatus`,
          payload: {
            advertisementId: id,
            deleted: true
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  //强制失效
  function loseEfficacy(id) {
    confirm({
      title: '失效确认',
      content: '您真的要强制使此条广告通知失效吗?',
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        console.group(id)
        dispatch({
          type: `${namespace}/updateStatus`,
          payload: { advertisementId: id, status: 3, deteted: false }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  let pageProps = {
    styles: 'word-wrap:break-word;word-break:break-all;',
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `admin/advertisement/page`,
      // 接口方式
      method: "POST",
      // "data_field_name":"data",
      app: "",
      // 接口参数
      params: {
        type: 1
      },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          // {
          //   en_name: 'province',
          //   zh_name: '投放城市',
          //   elem_type: 'Cascader',
          //   elem_valid_type: 'string',
          //   cmpt_items: areaList,
          //   split_keys: ['provinceCode', 'cityCode']
          // },
          {
            en_name: 'title',
            zh_name: '弹窗名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },

          {
            en_name: 'status',
            zh_name: '上架状态',
            elem_type: 'Select',
            elem_valid_type: 'string',
            cmpt_items: [
              {
                value: '0',
                label: '全部'
              },
              {
                value: '1',
                label: '上架'
              },
              {
                value: '2',
                label: '下架'
              },
              {
                value: '3',
                label: '失效'
              }
            ],
          },
          {
            en_name: 'validTime',
            zh_name: '生效时间',
            elem_type: 'Date',
            format: 'YYYY-MM-DD',
            // query_format: "YYYY-MM-DD HH:mm:ss",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
            // double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
            split_keys: ['startDate', 'endDate'],
            elem_valid_type: 'string'
          },
        ],
        searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click')
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格  序号 资讯标题 所属项目  所属城市 创建人 创建时间 更新人 更新时间   操作
      table:
      {
        status_params: "status=0",
        status_text: "全部",
        // 表头字段列表
        scroll: { x: 1300 },
        fields: [
          {
            en_name: "title",
            zh_name: "广告名称",
            width: 300
          },
          {
            en_name: "productType",
            zh_name: "所属产品",
            width: 150,
            render: (a, item) => {
              const arr = ['美的置业云', '智美分销', '']
              if (!(a + '' == '0' || a)) {
                a = 3
              }
              return (<span>{arr[Number(a)]}</span>)
            }
          },
          {
            en_name: "startDate",
            zh_name: "有效日期",
            width: 460,
            render: (a, item, index, d, e, f) => {

              return (
                <div>{item.startDate}{item.startDate ? '-' : ''}{item.endDate}</div>
              )
            }
          },
          // {
          //   en_name: "location",
          //   zh_name: "广告位置",
          //   width:120,
          //   render: (a, item, index, d, e, f) => {

          //         return (
          //             <span>{['','首页','美房详情'][item.location]}</span>
          //         )
          //   }

          // },
          {
            en_name: "status",
            zh_name: "上架状态",
            width: 120,
            render: (text, item, i) => {
              if (text == '1') {
                return <span>上架</span>
              } else if (text == '2') {
                return <span>下架</span>
              } else if (text == '3') {
                return <span>失效</span>
              }

            }
          },
          {
            en_name: "auditStatus",
            zh_name: "审核状态",
            width: 80,
            render: (text, item, i) => {
              switch (text) {
                case 1:
                  return <span>审核中</span>
                case 2:
                  return <span>已审核</span>
                case 0:
                  return <span>待审核</span>
                case -1:
                  return <span>审核驳回</span>
              }

            }
          },
          // {
          //   en_name: "linkType",
          //   zh_name: "链接类型",
          //   width: 150,
          //   render: (text, item, i) => {

          //     return <span>{obj[Number(text)]}</span>
          //   }
          // },
          {
            en_name: "creator",
            zh_name: "创建人",
            width: 80,
          },
          {
            en_name: "createTime",
            zh_name: "创建时间",
            width: 280
          },
          {
            en_name: "edit",
            zh_name: "操作",
            width: 160,
            fixed: 'right',
            render: (a, item, index, d, e, f) => {
              return (
                <span>
                  <FlagBtn node={<a onClick={() => addOrEditSkip('detail', item.advertisementId)}>查看<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                  <FlagBtn node={<a onClick={() => addOrEditSkip('edit', item.advertisementId)}>编辑<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>

                  <FlagBtn node={<a onClick={() => deleteContent(item.advertisementId)}>删除</a>} btnId={''}> </FlagBtn>

                  {/* <a onClick={() => deleteContent(item.contentId)}>删除</a> */}
                </span>
              )
            },
          }
        ]
      },
      // 操作栏
      action_bar: [
        {
          func_name: "add",
          label: "新增广告弹窗",
          btnId: '',
          type: "primary",
          onClick: (e) => {
            hashHistory.push({
              pathname: '/home/advertisementAdmin/advertisingWindowDetail',
              query: { actionType: 'add', }
            });
          }
        }
      ]
    },
  }

  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz }
      })
    }
  }

  return (
    <div className={[cx('pageLayout'), 'modalT'].join(' ')}>
      <ListPage pageProps={pageProps} />
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(advertisingWindowListView))
